<template>
  <div id="about">
    <Row type="flex" justify="space-around" class="about_card">
      <Col :md="{span:24}" :xs="{span:24}">
      <Card :bordered="false" dis-hover>
        <p slot="title">
          <Icon type="ios-copy-outline" />
          关于
        </p>
        <span slot="extra">
          <Button icon="ios-search" to="/rsume">查看简历</Button>
        </span>
        <p class="text">
         {{about_text}}
        </p>
        <Row type="flex" justify="space-around" class="about_card">
          <Col :md="{span:6}" :xs="{span:20}"  v-for="(v,i) in about_datas" :key="v.i" class="box">
          <Card style="height:200px;">
            <div style="text-align:center">
              <Icon :type="v.icon" size="100"/>
              <p>{{v.text}}</p>
            </div>
          </Card>
          </Col>
        </Row>
      </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
  export default {
    name: 'About',
    data() {
      return {
        about_text:'',
        'about_datas':[
          {'icon':'md-git-network','text':'计算机网络技术（网站建设与管理方向）'},
          {'icon':'ios-heart','text':'爱笑，爱运动，爱音乐，爱学习，爱生活'},
          {'icon':'md-code','text':'希望成为一名优秀的前端开发者'}
        ],
      }
    },
    components: {

    },
    methods: {
      getText() {
        this.$axios({
          method: 'post',
          url: 'tp5_jzt-blog_server/public/index.php/home/about',
        }).then((res) => {
          console.log('关于数据：',res.data);
          this.about_text=res.data.text;
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    created() {
      this.getText();
    },
    mounted() {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #about .photo {
    width: 100%;
    height: auto;
    border-radius: 100%;
  }
  #about .text {
    text-align: center;
    letter-spacing: 3px;
  }
  #about .box{
    margin: 15px 0;
  }
  #about .box:hover{
    color: #2D8CF0;
  }
</style>
